<template>
    <Popup class="tech-store-sleep" v-model="visiable">
        <div class="store-sleep-content">
            <img class="store-sleep-img" src="@assets/img/store_sleep.png" alt="门店休息">
            <div class="store-sleep-title">门店休息中</div>
            <!-- <div class="store-sleep-tip">营业时间（{{availableTimes}}）欢迎光临</div> -->
        </div>
        <div class="close-item" @click="hide">
            <TechIcon name="close-white" />
        </div>
    </Popup>
</template>

<script>
import { Popup } from 'vant';
import { TechIcon } from '@components/base';
export default {
    name: 'StoreSleep', // 门店休息提示
    components: {
        Popup,
        TechIcon,
    },
    props: {
        times: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    computed: {
        availableTimes() {
            const { times } = this.$props;
            const arr = times.map(item => `${item[0]}-${item[1]}`);
            return arr.join('、');
        },
    },
    data() {
        return {
            visiable: false,
        };
    },
    methods: {
        show() {
            this.visiable = true;
        },
        hide() {
            this.visiable = false;
        },
    },
};
</script>

<style lang="less">
.tech-store-sleep {
    height: 100vh;
    width: 100%;
    &.van-popup {
        background-color: transparent;
    }
    .flex-column-center();
    .store-sleep-content {
        background-color: @white;
        width: 85%;
        .flex-column-center();
        .p-v(@gap-lg * 2);
        border-radius: @border-radius;
        .store-sleep-img {
            width: 150px;
            .m-b(@gap-lg * 2);
        }
        .store-sleep-title {
            .font-size-md();
            color: @text-color;
            font-weight: @font-weight-bold;
        }
        .store-sleep-tip {
            .font-size();
            max-width: 70%;
            .t-c();
            .m-t(@gap);
            color: @gray-darker;
        }
    }
    .close-item {
        .m-t(30);
    }
}
</style>
